<template>
	<view class="max-box">
		<view class="label">
			<u-tabs :list="ordersData" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
			            color: 'red',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<view class="orders">
			<view class="orders-title">
				<view class="title-name">
					<text>玉石店</text>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
				<view class="to-be-paid">待支付</view>
			</view>
			<u-line type="info"></u-line>
			<view class="orders-content">
				<image src="@/static/logo.png" class="orders-image" mode=""></image>
				<view class="content-right">
					<view class=""><text class="content-name">玉石</text> 02</view>
					<view class="content-type">规格1</view>
					<view class="price-quantity">
						<view class="price">￥<text class="price-piece">0</text>.01</view>
						<view class="">x1</view>
					</view>
				</view>
			</view>
			<view class="commodity-price">
				<text class="actual-payment">共1件商品，实付款:</text>
				<text class="payment-price">￥0.01</text>
			</view>
			<u-line type="info"></u-line>
			<button class="content-button" @click="submitOrder">立即付款</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ordersData: [{
					name: '全部'
				}, {
					name: '待付款',
				}, {
					name: '待收货',
				}, {
					name: '已完成'
				}, {
					name: '已关闭'
				}],
			}
		},
		methods: {
			// 跳转提交订单页面
			submitOrder(){
				uni.navigateTo({
					url:'/pages/index/submitOrder/submitOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.max-box{
		height: 1440rpx;
		background-color: rgb(246, 246, 246);
	}
	.label{
		background-color: #fff;
		padding: 20rpx 20rpx 20rpx 30rpx;
	}
	.orders{
		background-color: #fff;
		padding: 20rpx 20rpx 100rpx 20rpx;
		margin-top: 20rpx;
		margin: 20rpx 20rpx 0rpx 20rpx;
	}
	.orders-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	.title-name{
		display: flex;
		align-items: center;
	}
	.to-be-paid{
		color: red;
	}
	.orders-content{
		padding: 20rpx;
		display: flex;
		align-items: center;
	}
	.orders-image{
		width: 220rpx;
		height: 220rpx;
		border-radius: 20rpx;
	}
	.content-right{
		width: 65%;
		margin-left: 20rpx;
	}
	.content-name{
		font-size: 35rpx;
		margin-right: 10rpx;
	}
	.content-type{
		margin-top: 20rpx;
		color: rgb(153, 153, 153);
	}
	.price-quantity{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.price{
		color: red;
	}
	.price-piece{
		font-size: 40rpx;
	}
	.commodity-price{
		float: right;
		margin-bottom: 20rpx;
	}
	.actual-payment{
		color: rgb(153, 153, 153);
	}
	.payment-price{
		font-size: 38rpx;
	}
	button::after {
		border: none;
	}
	
	button {
		padding-left: 20rpx;
		padding-right: 20rpx;
		text-align: center;
		line-height: 1.35;
		overflow: hidden;
	}
	.content-button{
		float: right;
		margin-top: 20rpx;
		width: 200rpx;
		border-radius: 40rpx;
		background-color: rgb(255, 44, 60);
		color: #fff;
		padding: 10rpx 20rpx 10rpx 20rpx;
	}
</style>